<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.content{width: 5000px;height: 358px;margin-top: 28px;margin-left: 18%;background:#0A0F23;}
			.box{display:inline-block;position: relative;margin:0;width: 200px;margin-left: 5px;}
			.parallelogram1-1{ width: 200px;  
			    height: 150px;  
			    -webkit-transform: skew(20deg);  
			    -moz-transform: skew(20deg);  
			    -o-transform: skew(20deg);  
			    -ms-transform: skew(20deg);  
			    transform: skew(20deg);  
			    border:2px solid #8ce8e7;  
			}
			.parallelogram2-1 {  
			    width:200px;  
			    height:150px;  
			    -webkit-transform:skew(-20deg);  
			    -moz-transform:skew(-20deg);  
			    -o-transform:skew(-20deg);  
			    -ms-transform:skew(-20deg);  
			    transform:skew(-20deg);  
			    border:2px solid #8ce8e7;   
			}   
			.box .bg{display: block;color:#fff;height:50%;background:#8ce8e7;line-height: 200%;margin-top: 36%;}  
			.box .parallelogram2-1 .bg{margin-top: 2%;}
			.box .title{position: absolute;color:#fff;top:26%;font-size:20px;display: block;width: 98%;text-align: center;margin-left:10px;padding-top: 8%;}
			.box .num{position: absolute;color:#fefd26;width: 100%;top: 0%;height: 25%;padding-top:10%;text-align:center;font-weight: bold;font-size: 1.5em;}
			.box .com{display: block;color:#9192a7;width: 100%;position: absolute;bottom: -24px;left:-20px;text-align: center;font-size: 12px;}
			.color2 .parallelogram1-1,.color2 .parallelogram2-1{border-color: #0aabb9;}
			.color2 .bg{background: #0aabb9;}
			.color3 .parallelogram1-1,.color3 .parallelogram2-1{border-color: #4fac88;}
			.color3 .bg{background: #4fac88;}
			.color4 .parallelogram1-1,.color4 .parallelogram2-1{border-color: #1977b3;}
			.color4 .bg{background: #1977b3;}
			
			.box .title2{position: absolute;color:#fff;top:54%;font-size:20px;display: block;width: 98%;text-align: center;margin-left:10px;padding-top: 8%;}
			.box .num2{position: absolute;color:#fefd26;width: 100%;top: 76%;height: 25%;padding-top:10%;text-align:center;font-weight: bold;font-size: 1.5em;}
		</style>
	</head>
	<body style="background:#0A0F23;">
		<div class="content">
			<div class="box color1">
				<div class="parallelogram1-1">
					<span class="bg"></span>
				</div>
				<div class="parallelogram2-1">
					<span class="bg"></span>
				</div>
				<span class="title">科技系统</span>
				<span class="num">311</span>
				<!--<span class="com">截止17年9月</span>-->
				<span class="title2">科研院所</span>
				<span class="num2">41</span>
			</div>
			
			<div class="box color2">
				<div class="parallelogram1-1">
					<span class="bg"></span>
				</div>
				<div class="parallelogram2-1">
					<span class="bg"></span>
				</div>
				<span class="title">开发区</span>
				<span class="num">98</span>
				<span class="title2">社会团体</span>
				<span class="num2">259</span>
			</div>
			<div class="box color3">
				<div class="parallelogram1-1">
					<span class="bg"></span>
				</div>
				<div class="parallelogram2-1">
					<span class="bg"></span>
				</div>
				<span class="title">军工系统</span>
				<span class="num">27</span>
				<span class="title2">媒体</span>
				<span class="num2">6</span>
			</div>
			<div class="box color4">
				<div class="parallelogram1-1">
					<span class="bg"></span>
				</div>
				<div class="parallelogram2-1">
					<span class="bg"></span>
				</div>
				<span class="title">高校</span>
				<span class="num">53</span>
				<span class="title2">其他</span>
				<span class="num2">158</span>
			</div>
		</div>
		
	</body>
</html>
